<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/top::head">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:replace="/common/top::header">

</div>
<div id="Content">
<div id="BackLink">
    <a href="../catalog/MainController">Return to Main Menu</a>
</div>

<div id="Catalog">

    <div id="Cart">

        <h2>Shopping Cart</h2>
        <form >
            <table>
                <tr>
                    <th><b>Item ID</b></th>
                    <th><b>Item Introduction</b></th>
                    <th><b>Item Price</b></th>
                    <th><b>Item Num</b></th>
                    <th><b>Total Price</b></th>
                    <th><b>Cart Timestamp</b></th>
                    <th>&nbsp;</th>
                    <th>&nbsp;</th>
                </tr>
                <!-- 判断 -->

                    <tr th:if="${carts.size() eq '0'}">
                        <td colspan="8"><b>Your cart is empty.</b></td>
                    </tr>

                <!--<c:if test="${carts.size()==0}">
                    <tr>
                        <td colspan="8"><b>Your cart is empty.</b></td>
                    </tr>
                </c:if>-->
                <!-- 循环 -->

                    <tr th:each="cart:${carts}">
                        <td><a th:href="|../catalog/ItemController?item_id=${cart.itemId}|" th:text="${cart.itemId}"></a></td>
                        <td th:text="${cart.itemIntroduction}"></td>
                        <td th:id="|item-price-${cart.cartId}|" th:text="${cart.itemPrice}"></td>
                        <td><input  th:id="|num-${cart.cartId}|" th:data-item-id="${cart.itemId}" style="width:3em" type="number" min="1" value="1" th:data-cartId="${cart.cartId}" th:data-itemId="${cart.itemId}" oninput="number_input(this.getAttribute('data-cartId'),this.getAttribute('data-itemId'))"></td>
                        <td th:id="|total-price-${cart.cartId}|" th:text="${cart.itemPrice}"></td>
                        <td th:text="${cart.getCartTimeStamp()}"></td>
                        <td><a th:href="|RemoveCartController?cart_id=${cart.cartId}|" class="Button" >Remove</a></td>
                        <td><a th:href="|BuyCartController?cart_id=${cart.cartId}|" th:onclick="'buyCart(\''+${cart.cartId}+'\')'" class="Button" >Buy</a></td>
                    </tr>

            </table>
        </form>
    </div>

    <div id="MyList">
        <!-- 判断 -->
        <include file="IncludeMyList.html" />
    </div>

    <div id="Separator">&nbsp;</div>
</div>
<script>
    function number_input(cart_id,item_id){
        // console.log(cartId,$("#num-"+cartId),$("#item-price-"+cartId).text(),$("#total-price-"+cartId))
        CalculatePriceServlet(cart_id,item_id,$("#num-"+cart_id).val());
    }
    function CalculatePriceServlet(cart_id,item_id,num){
        num*=1;
        if(num<1){
            alert("数量不能小于1");
            return;
        }
        $.ajax({
            url:ServerApi+"CalculatePriceServlet",
            data:{
                item_id:item_id,
                item_number:num
            },
            success:function(res){
                res=JSON.parse(res);
                if(res.status!=200){
                    error(res.msg);
                } else {
                    $("#total-price-"+cart_id).text(res.data.TotalPrice);
                }
            },
            error:function (){
                error("服务器异常");
            }
        })

    }
    function buyCart(cart_id){
        window.event.stopPropagation();
        window.event.preventDefault();
        var num=$("#num-"+cart_id).val()*1;
        if(num<1){
            alert("数量不能小于1");
            return;
        }
        window.location.href=(`BuyCartController?cart_id=${cart_id}&item_number=${num}`);
        // console.log(`buyCartController?cart_id=\${cart_id}&item_number=\${num}`)
    }
</script>
</div>
<div th:replace="common/bottom">

</div>
</body>
</html>